<template>
  <div class="login-container">
    <el-form :model="form" :rules="rules"
             status-icon
             ref="form"
             label-position="left"
             label-width="0px"
             class="demo-ruleForm login-page">
      <h3 class="title">系统登录</h3>
      <el-form-item prop="username">
        <el-input type="text"
                  v-model="form.username"
                  auto-complete="off"
                  placeholder="用户名"
        ></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password"
                  v-model="form.password"
                  auto-complete="off"
                  placeholder="密码"
        ></el-input>
      </el-form-item>
      <el-form-item style="width:100%;">
        <el-button type="primary" style="width:100%;" @click="handleSubmit">登录</el-button>
      </el-form-item>
      <el-form-item style="margin-bottom: 0">
        <el-button type="text" @click="tempAccount">临时账号</el-button>
        <el-button type="text" style="float: right" @click="registered">申请账号</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {get, post} from "@/plugins/axios"
import { Message } from "element-ui"

export default {
  name: 'login',
  data(){
    const module = '/user'
    return {
      uri: {
        login: module + '/login',
        decode: module + '/decode'
      },
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [{required: true, message: '请输入用户名', trigger: 'blur'}],
        password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      }
    }
  },
  methods: {
    handleSubmit(){
      this.$refs.form.validate((valid) => {
        if(valid){
          post(this.uri.login, this.form, response => {
            if (response.code === 200) {
              this.$store.commit('SET_TOKEN', response.data)
              Message.success(response.message)
              this.decode()
            }
          })
        }else{
          return false
        }
      })
    },
    registered() {
      this.$router.push('/registered')
    },
    tempAccount() {
      this.$router.push('/tempAccount')
    },
    decode() {
      const params = {
        token: this.$store.getters.GET_TOKEN
      }
      get(this.uri.decode, params, response => {
        if (response.code === 200) {
          // TODO 为了阻止控制台异常，暂且添加catch代码块 详情问题见：router文件夹下index.js的106行说明
          this.$store.commit('SET_ROLE', response.data.roleId)
          this.$router.push({path: '/', query: {userId: response.data.id}}).catch(() => {})
        }
      })
    }
  }
};
</script>

<style scoped lang="less">
.login-container {
  width: 100%;
  height: 100%;
  .login-page {
    -webkit-border-radius: 5px;
    border-radius: 5px;
    margin: 180px auto;
    width: 350px;
    padding: 35px 35px 15px;
    background: #fff;
    border: 1px solid #eaeaea;
    box-shadow: 0 0 25px #cac6c6;

    label.el-checkbox.rememberme {
      margin: 0 0 15px;
      text-align: left;
    }
  }
}
</style>